<template>
  <div class="Grxx">
    <footer>
      <router-link to="/Me">
        <div class="arrow"></div>
      </router-link>
      <span>个人信息</span>
    </footer>
    <div class="center">
      <ul>
        <li class="tx">
          个人头像
          <span></span>
          <img :src="grxx.imgs" />
        </li>
        <li class="name">
          用户昵称
          <input type="text" :value="grxx.name" />
        </li>
        <li class="qm">
          个性签名
          <input type="text" :value="grxx.qm" />
        </li>
        <li class="phone">
          捆绑手机
          <input type="text" :value="grxx.phone" />
        </li>
        <li class="bq">
          个人标签
          <div class="bq_box">
            <span v-for="(item, key) in grxx.bq" :key="key">
              {{ item }}
            </span>
          </div>
        </li>
      </ul>
    </div>
    <van-popup v-model="show" round>
      <div class="zhe">未登录</div>
    </van-popup>
    <!-- {{ grxx.bq[0] }} -->
    <!-- {{ book.name }} -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "Grxx",
  data() {
    return {
      show: false,
      img: "./tou.png",
      name: "海鲨",
      qm: "一命二运三风水",
      phone: "123123213123",
      bq: ["会粤语", "会音乐", "会跳舞"],
      //   原生
      //   books: [],
      grxx: [],
    };
  },
  created() {
    if (localStorage.getItem("token")) {
      // console.log(localStorage.getItem("token"));
      axios({
        url: " http://localhost:3000/grxx?uid=" + localStorage.getItem("token"),
        method: "get",
        params: { grxx: this.grxx },
      }).then((res) => {
        // console.log(res.data);
        this.grxx = res.data[0];
        res.data;
      });
    } else {
      this.show = true;
    }
  },
  methods: {
    showPopup() {
      this.show = false;
    },
  },
  //   原生
  //   created() {
  //     let xhr = new XMLHttpRequest();
  //     xhr.open("get", "http://localhost:3000/books", true);
  //     xhr.onreadystatechange = () => {
  //       if (xhr.readyState == 4 && xhr.status == 200) {
  //         console.log(xhr.responseText);
  //         this.books = JSON.parse(xhr.responseText);
  //       }
  //     };
  //     xhr.send();
  //   },
};
</script>
<style scoped>
.zhe {
  text-align: center;
  line-height: 1rem;
  background: white;
  color: black;
  width: 2rem;
  height: 1rem;
}
.arrow {
  margin-left: 0.2rem;
  width: 0.14rem;
  height: 0.14rem;
  border-top: 0.03rem solid black;
  border-right: 0.03rem solid black;
  transform: rotate(225deg);
  position: absolute;
  top: 0.3rem;
  /* color: #63adfa; */
}
footer span {
  position: absolute;
  top: 0.2rem;
  left: 38%;
  font-size: 0.24rem;
}
.center {
  margin-top: 0.85rem;
}
.center ul {
  margin: 0;
  padding: 0;
}
.center li {
  margin-left: 0.15rem;
  list-style: none;
  line-height: 0.58rem;
}
.center li input {
  float: right;
  border: none;
  outline: none;
  width: auto;
  text-align: right;
  color: #a6a6a6;
}

.tx {
  width: 3.47rem;
  height: 0.58rem;
  border-bottom: 0.01rem solid #a3a4a6;
}
.name {
  width: 3.47rem;
  height: 0.58rem;
}
.qm {
  width: 3.47rem;
  height: 0.58rem;
}
.phone {
  width: 3.47rem;
  height: 0.58rem;
}
.bp {
  width: 3.47rem;
  /* height: 0.53rem; */
}
.tx img {
  /* display: inline-block; */
  margin-top: 0.05rem;

  float: right;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
}
.bq_box {
  margin-top: 0.1rem;
  width: 3rem;
  word-wrap: break-word;
  word-break: normal;
}
.bq_box span {
  /* padding: 0; */
  color: #b9babc;
  line-height: 0.31rem;
  display: inline-block;
  text-align: center;
  border-radius: 0.05rem;
  height: 0.31rem;
  padding: 0 0.16rem 0 0.16rem;
  background: #f6f7f9;
  margin-right: 0.1rem;
}
</style>
